<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card>
          <el-select
            v-model="SearchValue"
            filterable
            clearable
            placeholder="请选择查询字段"
            style="width: 15%"
          >
            <el-option
              label="学号"
              value="u_id"
            ></el-option>
            <el-option
              label="姓名"
              value="username"
            ></el-option>
            <el-option
              label="籍贯"
              value="address"
            ></el-option>
            <el-option
              label="班级"
              value="classes"
            ></el-option>
          </el-select>
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="input"
            style="width: 20%"
            clearable
          >
          </el-input>
          <el-button
            type="primary"
            size="small"
            style="margin-left: 10px"
            @click="select"
          >搜索</el-button>
          <el-button
            type="primary"
            size="small"
            style="margin-left: 10px"
            @click="clearvalue"
          >重置</el-button>
          <el-button
            type="primary"
            size="small"
            style="margin-left: 10px"
            @click="openAddDialog"
          >添加</el-button>
        </el-card>

        <el-card
          style="margin-top: 20px; margin-bottom: 5rem"
          v-if="show1 == false"
        >
          <el-table
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="u_id"
              sortable
              label="学号"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="username"
              label="姓名"
              align="center"
            > </el-table-column>
            <el-table-column
              prop="sex"
              label="性别"
              align="center"
            > </el-table-column>
            <el-table-column
              prop="address"
              label="生源地"
              align="center"
            > </el-table-column>
            <el-table-column
              prop="departments"
              label="专业"
              align="center"
            > </el-table-column>
            <el-table-column
              prop="classes"
              label="班级"
              align="center"
            > </el-table-column>
            <el-table-column
              prop="email"
              label="邮箱"
              align="center"
            > </el-table-column>
            <el-table-column
              prop="type"
              label="类型"
              align="center"
            > 学生 </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              min-width='150px'
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="danger"
                  @click="openDel(scope.$index, scope.row)"
                >
                  删除
                </el-button>
                <el-button
                  size="small"
                  type="primary"
                  @click="cshow(scope.$index, scope.row)"
                >
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div
            class="block"
            style="text-align: center; margin-top: 20px"
          >
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40, 50]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="UserSize"
            >
            </el-pagination>
          </div>
        </el-card>

        <!-- 编辑页面 -->
        <el-card
          style="margin-top: 20px"
          v-else-if="show1 == true"
        >
          <el-page-header
            @back="goBack"
            content="详情页面"
          > </el-page-header>
          <br />
          <el-form
            ref="form"
            v-model="form"
            label-width="80px"
            style="width: 50%"
          >
            <el-form-item label="学号">
              <el-input
                v-model="form.uid"
                disabled
                style="width: 40%"
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input
                v-model="form.username"
                style="width: 40%"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="form.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="生源地">
              <el-input
                v-model="form.address"
                style="width: 40%"
              ></el-input>
            </el-form-item>
            <el-form-item label="专业">
              <el-select
                v-model="form.departments"
                clearable
                filterable
                class="item"
                @change="departmentsChange"
              >
                <el-option
                  v-for="item in departmentsoptions"
                  :key="item.d_id"
                  :label="item.departments"
                  :value="item.departments"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="班级">
              <el-select
                v-model="form.class"
                clearable
                filterable
                class="item"
              >
                <el-option
                  v-for="item in classoptions"
                  :key="item.c_id"
                  :label="item.classes"
                  :value="item.classes"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input
                v-model="form.email"
                clearable
                style="width: 40%"
              ></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-radio-group v-model="form.type">
                <el-radio label="教师"></el-radio>
                <el-radio label="学生"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="updata"
              >提交修改</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <!-- 对话框 -->
    <el-dialog
      title="添加学生"
      :visible.sync="centerDialogVisible"
      center
    >
      <el-form
        :model="temp"
        ref="dataForm"
        :rules="rules"
        label-position="left"
        label-width="70px"
        style="width: 500px; margin-left: 50px"
      >
        <el-form-item
          label="学号"
          label-width="120px"
          prop="uid"
        >
          <el-input
            v-model="temp.uid"
            clearable
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          label-width="120px"
          prop="password"
        >
          <el-input
            v-model="temp.password"
            clearable
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="姓名"
          label-width="120px"
          prop="username"
        >
          <el-input
            v-model="temp.username"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="性别"
          label-width="120px"
          prop="sex"
        >
          <el-radio-group v-model="temp.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="籍贯"
          label-width="120px"
          prop="address"
        >
          <el-input
            type="text"
            clearable
            v-model="temp.address"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="专业"
          label-width="120px"
          prop="de"
        >
          <el-select
            v-model="temp.departments"
            clearable
            class="item"
            @change="departmentsChange"
          >
            <el-option
              v-for="item1 in departmentsoptions"
              :key="item1.d_id"
              :label="item1.departments"
              :value="item1.departments"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="班级"
          label-width="120px"
          prop="class"
        >
          <el-select
            v-model="temp.class"
            clearable
            filterable
            class="item"
          >
            <el-option
              v-for="item in classoptions"
              :key="item.c_id"
              :label="item.classes"
              :value="item.classes"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="邮箱"
          label-width="120px"
          prop="email"
        >
          <el-input
            v-model="temp.email"
            clearable
            auto-complete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="centerDialogVisible = false"> 取消 </el-button>
        <el-button
          type="primary"
          @click="person_AddTeacher"
        > 添加 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDepartment,
  getByTypeUser,
  selectClasses,
  addUser,
  delUser,
  tipSearchUser,
  updateUser,
} from "../../api/admin-api/userAdmin";

export default {
  name: "StudentsAdmin",
  data() {
    var validateUid = (rule, value, callback) => {
      const r = /^[1-9]\d*$/; // 正整数
      if (!value) {
        callback(new Error("输入值不能为空"));
      } else if (!r.test(value)) {
        callback(new Error("输入值必须是数字"));
      } else {
        callback();
      }
    };
    return {
      /**
       * 1.绑定element-ui的action属性中,上传文件使用: 即上传路径
       * */
      form: {
        uid: "",
        username: "",
        sex: "",
        address: "",
        type: "",
        class: "",
        email: "",
        departments: "",
      },
      // 表单校验
      rules: {
        uid: [
          {
            validator: validateUid,
            required: true,
            message: "该处必须有值",
            trigger: "change",
          },
        ],
        username: [
          { required: true, message: "该处必须有值", trigger: "change" },
        ],

        sex: [{ required: true, message: "该处必须有值", trigger: "blue" }],
        password: [
          { required: true, message: "该处必须有值", trigger: "change" },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        address: [
          { required: true, message: "该处必须有值", trigger: "change" },
        ],
      },
      temp: {
        uid: "",
        password: "",
        username: "",
        sex: "",
        address: "",
        type: "",
        email: "",
        class: "",
        departments: "",
      },
      classoptions: "",
      departmentsoptions: "",
      SearchValue: "u_id",
      show1: false,
      show: false,
      input: "",
      type1: "",
      UserSize: 0,
      currentPage: 1,
      // 用户类型 此处是学生
      type: 3,
      tableData: [],
      pageSize: 10,
      pageNo: 1,
      // user: "",
      centerDialogVisible: false,
    };
  },

  created() {
    /**
     * 生命周期创建时先获取
     */
    this.get();

    getDepartment().then((res) => {
      this.departmentsoptions = res.data.data;
    });
  },
  methods: {
    // 专业级联查询班级
    departmentsChange(val) {
      selectClasses(val).then((res) => {
        this.classoptions = res.data.data;
      });
    },

    // 显示手动添加页面
    openAddDialog() {
      this.centerDialogVisible = true;
      this.temp = {};
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },

    // 获取最新列表
    get() {
      getByTypeUser(this.pageSize, this.pageNo, this.type).then((res) => {
        this.tableData = res.data.data;
        this.UserSize = res.data.total;
      });
    },

    person_AddTeacher() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          addUser(
            this.temp.uid,
            this.temp.username,
            this.temp.password,
            this.temp.sex,
            this.type,
            this.temp.email,
            this.temp.departments,
            this.temp.address,
            this.temp.class
          )
            .then((res) => {
              this.centerDialogVisible = false;
              this.$message({
                type: "success",
                message: "添加成功!",
              });
              this.get();
            })
            .catch((err) => {
              console.log("error submit!!");
              this.open3(err);
              return false;
            });
        }
      });
    },
    // 显示修改页面
    cshow(index, row) {
      // console.log(row);
      this.show1 = true;
      // this.user = row;
      this.form.uid = row.u_id;
      this.form.sex = row.sex;
      this.form.type = row.type;
      this.form.username = row.username;
      this.form.address = row.address;
      this.form.departments = row.departments;
      this.form.class = row.classes;
      this.form.email = row.email;
      if (row.type == 3) {
        this.form.type = "学生";
      }
      if (row.type == 2) {
        this.form.type = "教师";
      }
    },
    //显示修改页面
    goBack() {
      this.show1 = false;
    },
    //清除
    clearvalue() {
      this.get();
      this.input = "";
      this.SearchValue = "";
    },
    //成功提示
    open2(v) {
      this.$message({
        message: v,
        type: "success",
      });
    },
    //警告提示
    open3(v) {
      this.$message({
        message: v,
        type: "warning",
      });
    },

    updata() {
      if (
        !this.form.uid ||
        !this.form.username ||
        !this.form.sex ||
        !this.form.address ||
        !this.form.type ||
        !this.form.class ||
        !this.form.email ||
        !this.form.departments
      ) {
        this.open3("不可为空");
      } else {
        if (this.form.type == "学生") this.type1 = 3;
        if (this.form.type == "教师") this.type1 = 2;
        updateUser(
          this.form.uid,
          this.form.username,
          this.form.sex,
          this.form.address,
          this.form.departments,
          this.type1,
          this.form.email,
          this.form.class
        )
          .then((res) => {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.show1 = false;
            this.get(this.pageSize, this.pageNo, this.type);
          })
          .catch((err) => {
            this.open3(err);
          });
      }
    },
    /**
     * 分页搜索用户信息
     * ,输入内容
     * this.value,搜素类型
     * 页码大小
     * this.pageNo 当前页数
     * this.tableData列表数据
     *   this.UserSize列表数量
     * */
    select() {
      tipSearchUser(
        this.input,
        this.SearchValue,
        this.pageSize,
        this.pageNo,
        this.type
      ).then((res) => {
        this.tableData = res.data.data;
        this.UserSize = res.data.total;
      });
    },

    /**
     * 删除用户
     * */
    del(index, row) {
      delUser(row.u_id).then(() => {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.get();
      });
    },


    /**
     * 删除的弹出框
     * */
    openDel(index, row) {
      this.$confirm("此操作将删除学生, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.del(index, row);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    /*   onSubmit() {
                   // console.log('submit!');
               },*/
    /**
     * 当每页数量或者当前页数改变时重新获取数据
     * @param val
     */
    handleSizeChange(val) {
      this.pageSize = val;
      //当输入框等不为空搜索,否则全部分页显示
      if (this.input && this.SearchValue) {
        this.select();
      } else {
        this.get(this.pageSize, this.pageNo, this.type);
      }
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      // console.log(`当前页: ${val}`);
      //分页
      if (this.input && this.SearchValue) {
        this.select();
      } else {
        this.get(this.pageSize, this.pageNo, this.type);
      }
    },
  },
};
</script>

<style scoped lang="scss">
</style>
